import { BasicColumn } from '/@/components/Table';
import { h } from 'vue';
import { Image } from 'ant-design-vue';
import { FormSchema } from '/@/components/Table';

export const columns: BasicColumn[] = [
  {
    title: '手机号',
    dataIndex: 'mobile',
    width: 100,
  },
  {
    title: '用户名',
    dataIndex: 'username',
    width: 100,
  },
  {
    title: '头像',
    dataIndex: 'avatar_url',
    customRender: ({ record }) => {
      return h(Image, { src: record.avatar_url, width: 100, height: 100 });
    },
    width: 100,
  },
  {
    title: '描述',
    dataIndex: 'desc',
    width: 100,
  },
  {
    title: '角色',
    dataIndex: 'roles',
    width: 100,
    slots: { customRender: 'roles' },
  },
  {
    title: '最后一次登录时间',
    dataIndex: 'last_login',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'date_joined',
    width: 100,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'mobile',
    label: '手机号',
    component: 'Input',
    colProps: { span: 8 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'id',
    label: '用户id',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    required: true,
  },
  {
    field: 'mobile',
    label: '手机号',
    component: 'Input',
    required: true,
  },
  {
    field: 'password',
    label: '密码',
    component: 'InputPassword',
    required: true,
    ifShow: ({ values }) => {
      return !values.id;
    },
  },
  {
    field: 'avatar',
    label: '头像',
    component: 'Upload',
    slot: 'avatar',
  },
  {
    field: 'desc',
    label: '描述',
    component: 'InputTextArea',
  },
];

export const roleColumns: BasicColumn[] = [
  {
    title: '角色id',
    dataIndex: 'id',
    width: 60,
  },
  {
    title: '角色名称',
    dataIndex: 'name',
    width: 120,
  },
  {
    title: '角色备注',
    dataIndex: 'remark',
    width: 120,
  },
];
